<template>
  <div>
    <Header/>

    <div id="main">
      <article style="padding-top: 20px;">
        <div class="lbox">
          <div class="content_box whitebg">
            <h2 class="htitle">
              <span class="con_nav">
                您现在的位置是：<router-link to="/">网站首页</router-link>&gt;<span>美容产品</span>
              </span>美容产品
            </h2>

            <h1 class="con_tilte">{{info.name}}</h1>

            <div class="con_text">
              <el-row>
                <el-col :span="10">
                  <img :src="info.img" style="width: 100%; height: 270px!important;">
                </el-col>
                <el-col :span="14" style="padding: 0px 20px;">
                  <div>
                    <span>分类：{{info.category.name}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>价格：￥{{info.price}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>库存：{{info.inventory}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>兑换积分：{{info.integrate}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>兑换量：{{info.salesVolume}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <span>描述：{{info.describes}}</span>
                    <el-divider class="my-divider"></el-divider>
                    <button style="border: 0px; display: inline-block;" class="diggit" v-if="info.inventory != 0" @click="showDialog">
                      兑换
                    </button>
                    <button style="border: 0px; display: inline-block;" class="diggit" v-if="info.inventory == 0">
                      缺货
                    </button>
                  </div>
                </el-col>
              </el-row>

              <el-divider></el-divider>

              <el-row>
                <strong>
                  <span style="border-left: 2px solid #E2523A; margin-right: 10px;"></span>
                  <span style="color: #E2523A;">内容详情</span>
                </strong>
                <div v-html="info.content"></div>
              </el-row>

              <p><span class="diggit">到底咯</span></p>
            </div>
          </div>
        </div>

        <Right/>
      </article>
    </div>

    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <el-form-item label="兑换数量" prop="quantity">
          <el-input v-model.number="form.quantity" placeholder="请输入数量" clearable/>
        </el-form-item>
        <el-form-item label="收件人" prop="name">
          <el-input v-model="form.name" placeholder="请输入收件人" clearable/>
        </el-form-item>
        <el-form-item label="联系方式" prop="cellphone">
          <el-input v-model="form.cellphone" placeholder="请输入联系方式" clearable/>
        </el-form-item>
        <el-form-item label="收货地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入收货地址" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="submitForm">确 定</el-button>
        <el-button size="small" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <Footer/>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { detailsGetCommodity } from '@/api/commodity'
  import { addCommodityOrders } from '@/api/commodityOrders'
  import { getUser } from '@/api/user'
  import Header from '../common/Header.vue'
  import Footer from '../common/Footer.vue'
  import Right from '../common/Right.vue'

  export default {
    components: {
      Header,
      Footer,
      Right
    },
    computed: {
      ...mapGetters([
        'userId'
      ])
    },
    data() {
      // 表单数据空值效验
      const validateData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'))
        } else {
          callback()
        }
      }
      // 表单数据数字效验
      const validateNumberData = (rule, value, callback) => {
        if (value == null || value.length == 0) {
          callback(new Error('必填项不能为空'))
        } else {
          if (Number.isInteger(value)) {
            callback()
          } else {
            callback(new Error('请输入数字'))
          }
        }
      }
      return {
        info: {},
        newList: [],
        hotList: [],
        // 遮罩层
        loading: true,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          quantity: [{ required: true, trigger: 'blur', validator: validateNumberData }],
          name: [{ required: true, trigger: 'blur', validator: validateData }],
          cellphone: [{ required: true, trigger: 'blur', validator: validateData }],
          address: [{ required: true, trigger: 'blur', validator: validateData }]
        },
      }
    },
    watch: {
      '$route'(to, from) {
        if (to.name == 'commodity-details') {
          this.detailsGetCommodity(to.params.id)
        }
      }
    },
    created() {
      this.detailsGetCommodity(this.$route.params.id)
      this.getUser()
    },
    methods: {
      detailsGetCommodity(id) {
        this.loading = true
        detailsGetCommodity(id).then(response => {
          this.info = response.data
          this.loading = false
        })
      },
      getUser() {
        this.loading = true
        getUser(this.userId).then(response => {
          this.form = response.data
          this.loading = false
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          cellphone: null,
          address: null,
          quantity: null
        }
      },
      showDialog() {
        this.open = true
        this.title = '礼品兑换'
      },
      submitForm() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.info.inventory >= this.form.quantity) {
              this.form.id = null
              this.form.status = null
              this.form.commodityId = this.info.id
              this.form.userId = this.userId
              this.form.money = this.info.price * this.form.quantity
              addCommodityOrders(this.form).then(response => {
                this.info.inventory = this.info.inventory - this.form.quantity
                this.info.salesVolume = this.info.salesVolume + this.form.quantity
                this.$message.success('兑换成功')
                this.open = false
              })
            } else {
              this.$message.error('操作失败：库存不足')
            }
          }
        })
      }
    }
  }
</script>
